<template>
    <div>
        <div>
            <ul>
                <li v-for="(friendRoom) in  userFriendList"
                    @dblclick="enterTheRoom(friendRoom)"
                    :key="friendRoom">
                    {{friendRoom}}
                </li>
            </ul>
        </div>
        <div>
            <ul>
                <li v-for="(msg,index) in userMsgList.content"
                    :key="index">{{msg.uid}}-{{msg.massage}}</li>
            </ul>
            <input type="text"
                v-model="content">
            <button @click="msgSubmit">发送</button>
        </div>
    </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
export default {
  data() {
    return {
      content: ''
    };
  },
  methods: {
    ...mapActions(['setUserMsgList', 'setUserFriendContent']),
    enterTheRoom(friendRoom) {
      this.setUserMsgList(friendRoom);
    },
    msgSubmit() {
      this.setUserFriendContent({
        uid: this.userInfo.name,
        fid: this.userMsgList.fid,
        msg: this.content
      });
    }
  },
  computed: {
    ...mapGetters({
      userInfo: 'getUserInfo',
      userFriendList: 'getUserFriendList',
      userMsgList: 'getUserMsgList'
    })
  },
  created() {}
};
</script>

